<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<meta name="_ctx" th:content="@{/}" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" th:href="@{/bootstrap/dist/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}" />
<link rel="stylesheet" th:href="@{/css/doc.css}" />
<link rel="stylesheet" th:href="@{/css/scroll.css}">
<link rel="stylesheet" th:href="@{/jsonview/json-viewer.css}">
<style>
	
</style>
</head>
<body>
<header>
	<div class="row">
		<div class="col-md-4 ">
			<span class="docName" th:text="'接口名称：'+${doc.name}">放放风</span>
		</div>
		<div class="col-md-2 ">
			<span class="docName" th:text="'作者：'+${doc.nick_name}">作者：帅大叔</span>
		</div>
		<div class="col-md-4 col-md-offset-2">
			<span><i class="glyphicon glyphicon-time"></i> <em th:text="${doc.create_time}">2017-12-12 52:25:10</em></span>
			<a th:unless="${#lists.isEmpty(session.USER_SESSION)}" th:href="@{/doc/edit/{id}(id=${doc.id})}" class="btn btn-info">编辑</a>
			<a th:unless="${#lists.isEmpty(session.USER_SESSION)}" href="#" id="delDoc" th:attr="doc_id=${doc.id}" class="btn btn-danger">删除</a>
		</div>
	</div>
</header>
<div class="row" style="margin: 0px;padding: 0px;">
	<div class="col-md-8">
		<div id="markdownView" class="editormd-preview-theme">
		  <textarea name="content" style="display:none;" th:text="${doc.content}"></textarea>
		</div>
	</div>
	<div class="col-md-4">
		<h3>接口测试</h3>
		<div class="row">
			<table class="table table-hover">
				  <tbody>
				    <tr>
				      <td class="td-header">请求方法:</td>
					      <td>
							<label class="radio-inline">
						        <input type="radio" name="method" value="get" checked> GET
						    </label>
							<label class="radio-inline">
						        <input type="radio" name="method" value="post" > POST
						    </label>
						</td>
				    </tr>
				    <tr>
				      <td class="td-header" >请求地址:</td>
				      <td><input style="width: 100%" class="form-control noBorder" type="text" name="url" value="http://47.75.149.241:8880/walletweb/news/getNotice"/></td>
				    </tr>
				  </tbody>
				</table>
		</div>
		<div class="row">
			<table class="table table-hover">
			  <caption><span class="btn btn-info addParame">添加参数</span> <p class="btn btn-info urlRequest">请求</p></caption>
			  <thead>
			    <tr>
			      <th class="col-md-3">参数名称</th>
			      <th class="col-md-8">参数值</th>
			    </tr>
			  </thead>
			  <tbody class="parameBody">
			  </tbody>
			</table>
		</div>
		
		<div class="row">
			<h3>返回结果：</h3>
			<div class="resultData"></div>
		</div>
	</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/jsonview/jquery.json-viewer.js}"></script>
<script th:src="@{/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- editormd start 
-->
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
    var markdownView;
    markdownView = editormd.markdownToHTML("markdownView", {
    	//htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
        previewTheme: "dark",//预览主题
    });
    
   
})

var parameIndex=0;
$(function(){
	//删除接口
  $("#delDoc").click(function(){
    	var id = $(this).attr("doc_id");
    	if(confirm("你确定要删除吗？")){
    		submitDelDocData(id);
    	}
    });
  
	//请求测试
  $(".urlRequest").click(function(){
  	var url = $("input[name='url']").val();
  	var requestMethod = $("input[name='method']:checked").val();
  	var mdata = getParame();
  	$.ajax({
  		type:requestMethod,
  		url:url,
  		cache:false,
  		dataType:"json",
  		data:mdata,
  		success:function(data){
  			$('.resultData').jsonViewer(data);
  		},
  		error:function (jqXHR, textStatus, errorThrown){
  			alert(textStatus+"\n不支持跨域请求 \n详情请看控制台");
  		}
  	});
  });
  
	//添加参数
	$(".addParame").click(function(){
		parameIndex++;
		var str = "<tr><td><input name='k"+parameIndex+"' class='form-control' placeholder='key'/></td>"
		+"<td><input name='v"+parameIndex+"' class='form-control' placeholder='value'/></td></tr>";
		$(".parameBody").append(str);
	});
  
})

//获取参数
function getParame(){
	var parame= new Object();
	var parameStr="";
	for(var i=1;i<=parameIndex;i++){
		var key =$("input[name='k"+i+"']").val();
		var value =$("input[name='v"+i+"']").val();
		if(key != ""){
			parame[key]=value;
		}
		parameStr += "&"+key+"="+value;
	}
	return parameStr;
}

//删除接口请求
function submitDelDocData(id){
	$.ajax({
		type:"post",
		url:_ctx+"/doc/del/"+id,
		cache:false,
		dataType:"json",
		data:{_t:new Date().getTime()},
		success:function(data){
			if(data.status == "success"){
				location.href=_ctx+"/index";
			}else{
				alert(data.msg);
			}
		}
	});
}
</script>
</body>
</html>